<!DOCTYPE html>

<head>

    <meta charset="UTF-8">
    <title></title>
    <script src="/js/vue.js">
    </script>

</head>



<body>

    <div id="story" style="width: 600px;border: solid;">

        <h1>我爱的古诗词</h1>

        <div align="center" style="background-color:aliceblue">

            <input type="text" v-bind:value="poetry[0].value">

            <button id="show" type="button" @click="flag=!flag">
                {{flag?"关闭":"展开"}}

                </button>

        </div>

        <div v-show="flag" v-for=" s in poetry" :key="s.name">
            {{s.value}}

        </div>

    </div>

    <script>

        new Vue({
            el: "#story",
            data: {
                flag: false,
                poetry: [{ "name": "0", "value": "登幽州台歌" },
                { "name": "1", "value": "前不见古人，" }, 
                { "name": "2", "value": "后不见来者。"},
                { "name": "3", "value": "念天地之悠悠，" },
                { "name": "4", "value": "独怆然而涕下。"}
            ]
            },
            methods: {

            }
        }) 

    </script>

</body>

</html>